<template>
	<view class="index">
		<view class="indexBanner" :style="{backgroundImage: 'url('+ indexImg +')'}">
			<view class="indexTop">
				<view class="indexTop-barheight" :style="{height: barheight}">
					<view class="" :style="{marginTop: bartop}">
						<text class="indexTop-barheight-title">{{title}}</text>
					</view>
				</view>
			</view>
			<view class="index-search">
				<view class="index-search-box">
					<image @click="cli_confirm" class="index-search-box-img" src="https://www.zzzsyh.com/applets/agent/agent/search.png" mode=""></image>
					<input @confirm="cli_confirm" confirm-type=search v-model="serrch_value" class="index-search-box-inp" type="text" value=""placeholder-class="inputplace" placeholder="搜索产品或关键词" />
					<!-- <text class="index-search-box-txt">
						搜索
					</text> -->
				</view>
			</view>
			<!-- <view class="index-silder">
				<uni-swiper-dot :info="list_tj" mode="dot" :current="current" :dots-styles="dotsStyles">
					<swiper class="swiper-box" @change="change">
						<swiper-item v-for="(item ,index) in list_tj" :key="index">
							<image class="index-silder-img" :src=item mode=""></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view> -->
			<view class="indexClick">

			</view>

			<view class="nav">
				<view class="navLi-main">
					<view class="navLi-scr">
						<uni-swiper-dot :info="listNavall" mode="round" :current="current" :dots-styles="dotsStyles">
							<swiper class="swiper-nav-box" @change="change">
								<swiper-item class="navLi" v-for="(ite ,ind) in listNavall" :key="ind">
									<uni-grid class="navLi-grid" :column="4" :showBorder="false" :square="false">
										<view class="navLiBox" v-for="(item,index) in ite" :key="index"
											@click="cli_nav(item, index)">
											<!-- :class="[{navclolr0 : index == 0}, {navclolr1 : index == 1 || index == 4 || index == 7}, {navclolr3 : index == 2 || index == 5}, {navclolr4 : index == 3 || index == 6} ]" -->
											<view class="vanImg">
												<image class="vanImgImg" :src=item.typeImgurl mode=""></image>
											</view>
											<text class="navLiBoxTxt">{{item.typeName}}</text>
										</view>
									</uni-grid>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>

					</view>
				</view>

				<!-- <view class="nav-scrBtm">
					<view class="nav-scrBtm-cen">
						<view class="nav-scrBtm-cen-color" :class="[{navMove: navLeft == 0},{navMoveRight: navLeft == 1}]">
			
						</view>
					</view>
				</view> -->
			</view>
		</view>

		<view class="index-advertising" @click="cli_gonavlist">
			<image class="index-advertisingImg" src="https://www.zzzsyh.com/applets/agent/agent/2.png" mode=""></image>
		</view>
		<view class="index-commodict">
			<view class="index-commodict-title">
				<view class="flex">
					<text class="left-blue"></text>
					<text class="index-commodict-title-txt1">热门推荐</text>
				</view>
				<view class="flex" @click="cli_lookAll">
					<text class="index-commodict-title-txt2">查看全部</text>
					<image class="rightTwo" src="https://www.zzzsyh.com/applets/agent/agent/right-2.png" mode=""></image>
				</view>
			</view>
			<view class="index-commodict-main">
				<!-- <uni-grid :column="2"> -->
				<!-- <view class="index-commodict-main-li" @click="cli_rmtj(item)" v-for="(item, index) of list_hot" :key="index">
					<image class="index-commodict-main-li-img" :src=item.partsImages mode=""></image>
					<view class="index-commodict-main-title">
						{{item.partsName}}
					</view>
					<view class="index-commodict-main-money">
						<view class="">
							<text class="index-commodict-main-money-txt">￥</text>
							{{item.minPrice}}-{{item.maxPrice}}
						</view>
						<text class="index-commodict-main-money-txt2" v-if="item.isPost == 1">
							包邮
						</text>
					</view>
					<view class="index-commodict-main-content" v-if="item.partsDistinguish == 1 || item.partsDistinguish == 2">
						<text class="index-commodict-main-content-txt1">保</text>
						<text class="index-commodict-main-content-txt2" v-if="item.partsDistinguish == 1">候保品牌</text>
						<text class="index-commodict-main-content-txt2" v-else>主事丫环品牌</text>
						<text class="index-commodict-main-content-txt3" v-if="item.partsHasGrant == 1">带补贴</text>
						<text class="index-commodict-main-content-txt3" v-if="item.partsHasGrant == 0">无补贴</text>
					</view>
					<view class="index-commodict-main-content" v-if="item.partsHasGrant == 1">
						<text class="index-commodict-main-content-txt1">保</text>
						<text class="index-commodict-main-content-txt2" v-if="item.partsHasGrant == 1">补助金质保</text>
					</view>
				</view> -->
				<!-- </uni-grid> -->
				<view class="index-commodict-main-left">
					<view class="index-commodict-main-li" @click="cli_rmtj(item)" v-for="(item, index) of list_hot_left" :key="index">
						<image class="index-commodict-main-li-img" :src=item.partsImages mode=""></image>
						<view class="index-commodict-main-title">
							{{item.partsName}}
						</view>
						<view class="index-commodict-main-money">
							<view class="">
								<text class="index-commodict-main-money-txt">￥</text>
								{{item.minPrice}}-{{item.maxPrice}}
							</view>
							<text class="index-commodict-main-money-txt2" v-if="item.isPost == 1">
								包邮
							</text>
						</view>
						<view class="index-commodict-main-content" v-if="item.partsHasGrant == 1">
							<text class="index-commodict-main-content-txt1">保</text>
							<text class="index-commodict-main-content-txt2" v-if="item.partsHasGrant == 1">补助金质保</text>
						</view>
					</view>
				</view>
				<view class="index-commodict-main-right">
					<view class="index-commodict-main-li" @click="cli_rmtj(item)" v-for="(item, index) of list_hot_right" :key="index">
						<image class="index-commodict-main-li-img" :src=item.partsImages mode=""></image>
						<view class="index-commodict-main-title">
							{{item.partsName}}
						</view>
						<view class="index-commodict-main-money">
							<view class="">
								<text class="index-commodict-main-money-txt">￥</text>
								{{item.minPrice}}-{{item.maxPrice}}
							</view>
							<text class="index-commodict-main-money-txt2" v-if="item.isPost == 1">
								包邮
							</text>
						</view>
						<view class="index-commodict-main-content" v-if="item.partsHasGrant == 1">
							<text class="index-commodict-main-content-txt1">保</text>
							<text class="index-commodict-main-content-txt2" v-if="item.partsHasGrant == 1">补助金质保</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				bartop: '', // 距离头部距离
				barheight: '', // 头部区域高度
				title: '主事丫环会长端', // 标题名称
				list_tj: [
					"https://img1.baidu.com/it/u=2686816701,574079545&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=873",
					"https://img0.baidu.com/it/u=2037149991,744940061&fm=26&fmt=auto",
					"https://img2.baidu.com/it/u=2506623544,2813275371&fm=26&fmt=auto",
					"https://img2.baidu.com/it/u=808766443,3846552600&fm=26&fmt=auto"
				],
				indexImg: 'https://www.zzzsyh.com/applets/agent/agent/1.png',
				// 轮播图样式
				current: 0,
				dotsStyles: {
					bottom: 12,
					width: 28,
					height: 4,
					border: '0',
					backgroundColor: 'rgba(232, 232, 232, 1)',
					selectedBackgroundColor: 'rgba(88, 210, 111, 1)',
					selectedBorder: '1px rgba(88, 210, 111, 1) solid'
				},
				// nav
				listNavall: [],
				list_hot: [],
				navLeft: -1,
				serrch_value: '', // 搜索的内容
			}
		},
		computed: {
			list_hot_left () {
				let list = this.list_hot
				let list1 = []
				list.forEach( (item, index) => {
					if (index % 2 == 0) {
						list1.push(item)
					}
				})
				return list1
			},
			list_hot_right () {
				let list = this.list_hot
				let list1 = []
				list.forEach( (item, index) => {
					if (index % 2 != 0) {
						list1.push(item)
					}
				})
				return list1
			}
		},
		mounted() {
			this.get_uni_head()
			// 获取金刚去列表
			this.getPartsTypeByPid()
			// 获取热门推荐
			this.getPartsList()
		},
		methods: {
			change1(e) {
				console.log(e);
				let current = e.detail.current;
				if (current == 0) {
					this.navLeft = 1
				} else {
					this.navLeft = 0
				}
			},
			// 点击搜索
			cli_confirm () {
				let val = this.serrch_value
				if (val) {
					uni.navigateTo({
						url:'/pages/search/search?value=' + val
					})
				}else {
					uni.showToast({
						title: '请先输入您要搜索的内容',
						icon: 'none'
					})
				}
			},
			// 点击查看全部
			cli_lookAll () {
				let val = 0
				uni.navigateTo({
					url:'/pages/search/search?all=' + val
				})
			},
			// 轮播图
			change(e) {
				console.log(e);
				this.current = e.target.current
			},
			// 点击金刚去
			cli_nav(item, index) {
				uni.navigateTo({
					url:'/pages/navList/navList?id=' + item.id
				})
			},
			// 去商品分类页
			cli_gonavlist () {
				uni.navigateTo({
					url:'/pages/shopNav/shopNav'
				})
			},
			// 点击热门推荐
			cli_rmtj (item) {
				console.log(item);
				uni.setStorageSync('factoryId', item.factoryId)
				uni.navigateTo({
					url:'/pages/yuDing/yuDing?id=' + item.id
				})
			},
			// 获取产品分类
			getPartsTypeByPid () {
				uni.request({
					url: allapi.getPartsTypeByPid,
					data: {
						pid: 0
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						let num = Math.ceil(dat.length/8)
						let listAll = []
						for (let n=0; n < num; n++) {
							let list = []
							list = dat.slice(8*n, 8*(n+1))
							listAll.push(list)
						}
						this.listNavall = listAll
					}
				})
			},
			// 获取热门推荐
			getPartsList () {
				uni.request({
					url: allapi.getPartsList,
					data: {
						isHot: 1
					},
					success: (res) => {
						console.log(res);
						this.list_hot = res.data.data
					}
				})
			},
			// 或许系统屏幕高度
			get_uni_head() {
				const systemInfo = uni.getSystemInfoSync();
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				const barheight = menuButtonInfo.height + menuButtonInfo.top + 12
				this.barheight = barheight + 'px'
				this.bartop = menuButtonInfo.top + 'px'
			}
		}
	}
</script>

<style>
	.uni-swiper__dots-item.data-v-77b53eff.uni-swiper__dots-long {
		width: 28px !important;
		border: 0 !important;
	}

	.uni-swiper__dots-box.data-v-77b53eff {
		/* justify-content: flex-end !important; */
		/* margin-right: 20rpx; */
		/* width: 28px !important; */
	}
</style>
<style scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.index {
		position: absolute;
		width: 100%;
		height: 100%;
		/* background: #FFFFFF; */
		overflow: auto;
	}

	.indexBanner {
		width: 100%;
		height: 916rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;

		/* background-image: url('https://img1.baidu.com/it/u=2437180167,2100305174&fm=26&fmt=auto'); */
	}

	/* 头部nav 背景 */
	.navclolr0 {
		background-image: url('https://www.zzzsyh.com/applets/upImage/ccn1.png') !important;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.navclolr1 {
		background-image: url('https://www.zzzsyh.com/applets/upImage/ccn2.png') !important;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.navclolr2 {
		background-image: url('https://www.zzzsyh.com/applets/upImage/ccn3.png') !important;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.navclolr3 {
		background-image: url('https://www.zzzsyh.com/applets/upImage/ccn4.png') !important;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.navclolr4 {
		background-image: url('https://www.zzzsyh.com/applets/upImage/ccn5.png') !important;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.indexTop {}

	.indexTop-barheight {
		/* background: #58D26F; */
		padding-top: 0.1px;
	}

	.indexTop-barheight-title {
		margin-top: 9px;
		color: #FFFFFF;
		font-weight: 500;
		font-size: 18px;
		margin-left: 32rpx;
		letter-spacing: 1px;
	}

	.index-search {
		height: 64rpx;
		/* background: #58D26F; */
	}

	.index-search-box {
		margin: 0 32rpx;
		height: 64rpx;
		border-radius: 32rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.index-search-box-img {
		width: 34rpx;
		height: 34rpx;
		margin-left: 46rpx;
	}

	.index-search-box-inp {
		flex: 1;
		font-size: 28rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	.index-search-box-txt {
		width: 112rpx;
		height: 56rpx;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		background: #58D26F;
		font-size: 28rpx;
		margin-right: 2rpx;
	}

	.indexClick {
		flex: 1;
		/* background: red; */
		/* height: 240rpx; */
	}

	.index-silder {
		margin: 0 24rpx;
		/* margin-top: -238rpx; */
		/* background: red; */
		height: 432rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.index-silder-img {
		width: 100%;
		height: 218rpx;
	}

	.swiper-box {
		height: 220rpx;
	}

	.nav {
		margin: 0 16rpx;
		margin-bottom: 8rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.navLi-main {
		height: 432rpx;
		/* overflow: hidden; */
	}

	.swiper-nav-box {
		height: 432rpx;
	}

	.navLi {
		padding: 10rpx 0px;
	}

	.navLi-grid {
		width: 100%;
	}

	.navLiBox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* width: 170rpx; */
		width: 25%;
		float: left;
		align-self: flex-start;
		/* margin: 10rpx 12rpx */
		margin-top: 20rpx;
	}

	.navLiBoxTxt {
		font-size: 24rpx;
		margin-top: 22rpx;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #333333;
	}

	.nav-scrBtm {
		display: flex;
		justify-content: center;
		align-content: center;
		margin-bottom: 5px;
		/* margin-top: 10px; */
	}

	.nav-scrBtm-cen {
		width: 90rpx;
		height: 6rpx;
		background: #EEEEEE;
		border-radius: 6rpx;
		position: relative;
	}

	.nav-scrBtm-cen-color {
		position: absolute;
		width: 65rpx;
		height: 4rpx;
		background: #bbbbbb;
		border-radius: 3px;
	}

	.vanImg {
		width: 112rpx;
		height: 112rpx;
		/* background: #007AFF; */
		/* border-radius: 16rpx; */
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-weight: 600;
	}

	.vanImgImg {
		width: 112rpx;
		height: 112rpx;
	}

	.navMove {
		animation: navclolr 0.5s linear;
		animation-fill-mode: forwards;
	}

	.navMoveRight {
		animation: navclolrRighr 1s linear;
		animation-fill-mode: forwards;
	}

	/* 动画效果 */
	@keyframes navclolr {
		0% {
			left: 0;
		}

		100% {
			left: 34rpx;
		}
	}

	@keyframes navclolrRighr {
		0% {
			left: 34rpx;
		}

		100% {
			left: 0px;
		}
	}

	.index-advertising {
		margin: 24rpx 16rpx 0;
		height: 164rpx;
		/* background: red; */
	}

	.index-advertisingImg {
		width: 100%;
		height: 164rpx;
	}

	.index-commodict {
		margin-top: 50rpx;
		/* margin: 50rpx 24rpx 0; */
	}

	.index-commodict-title {
		display: flex;
		justify-content: space-between;
		margin-right: 48rpx;
	}

	.left-blue {
		width: 10rpx;
		height: 34rpx;
		background: #58D26F;
		border-radius: 5rpx;
		margin-left: 24rpx;
	}

	.index-commodict-title-txt1 {
		color: #333333;
		font-weight: 500;
		font-size: 32rpx;
		margin-left: 24rpx;
	}

	.index-commodict-title-txt2 {
		font-size: 24rpx;
		color: #666666;
		font-weight: 400;
	}

	.rightTwo {
		width: 32rpx;
		height: 32rpx;
	}

	.index-commodict-main {
		/* margin: 12rpx 18rpx 0 18rpx; */
		/* display: flex; */
		/* justify-content: space-between; */
		/* display: inline-block; */
		margin-bottom: 20rpx;
		display: flex;
	}
	
	.index-commodict-main-left {
		flex: 1;
	}

	.index-commodict-main-right {
		flex: 1;
	}

	.index-commodict-main-li {
		width: 308rpx;
		padding: 16rpx 16rpx;
		padding-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin-left: 22rpx;
		margin-top: 24rpx;
		float: left;
		/* min-height: 200rpx; */
		/* box-shadow: 0px 2px 5px #F7F7F7; */
		/* box-shadow: 0px 2px 5px #ccc; */
	}
	/* .index-commodict-main-li:nth-child(2n + 1) {
		order: 1;
	}
	.index-commodict-main-li:nth-child(2n + 2) {
		order: 2;
	} */
	.index-commodict-main-li-img {
		width: 308rpx;
		height: 308rpx;
		border-radius: 12rpx;
		background: #3F536E;
	}

	.index-commodict-main-title {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		margin-top: 8rpx;
	}

	.index-commodict-main-money {
		font-size: 36rpx;
		color: #EF691C;
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
	}

	.index-commodict-main-money-txt {
		font-size: 24rpx;
	}

	.index-commodict-main-money-txt2 {
		height: 36rpx;
		line-height: 36rpx;
		border: 2rpx solid #EF691C;
		padding: 0 12rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
	}

	.index-commodict-main-content {
		font-size: 24rpx;
		color: #F86B3D;
		height: 52rpx;
		background: #FEEFEA;
		border-radius: 30rpx;
		font-weight: 400;
		margin: 16rpx 0;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		width: 220rpx;
	}

	.index-commodict-main-content-txt1 {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 20rpx;
		background: #F86B3D;
		border-radius: 50%;
		color: #FFFFFF;
		text-align: center;
		margin-left: 12rpx;
	}

	.index-commodict-main-content-txt2 {
		flex: 1;
		text-align: center;
		letter-spacing: 2rpx;
	}
	.index-commodict-main-content-txt3 {
		margin-right: 16rpx;
	}
</style>
